<template>
  <div>
    <el-card class="container">
      <!-- 顶部工具 -->
      <el-row type="flex">
        <el-col>
          <el-button type="primary" @click="isShowDialog = true">添加客户</el-button>
        </el-col>
        <el-col>
          <el-row type="flex">
            <!-- select 需要双向绑定 v-model
            里面套 option , option 需要有 value值给 v-modle 储存
            另外有 label 是给人看, 这里经纪人的名称作为label 经纪人的 id 作为value 起来 -->
            <el-select v-model="selectAgent">
              <el-option label="全部经纪" value="" />
              <el-option
                v-for="item in agentList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <el-input v-model="keyword" />
            <el-button @click="search">筛选</el-button>
          </el-row>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table :data="clientList" border class="mainTable">
        <el-table-column label="头像" prop="image" width="200">
          <template v-slot="{row}">
            <img class="avatar" :src="row.image" alt="">
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="name" />
        <el-table-column label="邮箱" prop="email" />
        <el-table-column label="电话" prop="phone" />
        <el-table-column label="经纪" prop="agent.name" />
        <el-table-column label="微信" prop="wechat" />
        <el-table-column label="详情" prop="desc" />
        <el-table-column label="操作" width="200">
          <template v-slot="{row}">
            <el-button size="small" type="primary" @click="showEditDialog(row.id)">编辑</el-button>
            <el-button size="small" type="danger" @click="delClient(row.id)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="center">
        <el-pagination
          layout="prev, pager, next"
          :page-size="pageConfig._limit"
          :total="total"
          @current-change="currentChange"
        />
      </el-row>
      <!-- 弹窗 -->
      <ClientDialog
        ref="clientDialog"
        :agent-list="agentList"
        :is-show-dialog.sync="isShowDialog"
        @reloadPage="loadPage"
      />
    </el-card>
  </div>
</template>

<script>
import { getClientList, getClientNumber, delClient } from '@/api/client'
import { getAgentList } from '@/api/agent'

import ClientDialog from './componenets/client-dialog.vue'

export default {
  components: {
    ClientDialog
  },
  data() {
    return {
      selectAgent: '',
      clientList: [],
      isShowDialog: false,
      total: 0,
      currentPage: 1,
      keyword: '',
      agentList: []
    }
  },
  computed: {
    pageConfig() {
      // 设定每页长度
      const pageSize = 2

      // 每次拿数据, 都根据每页长度和当前页码算出需要的参数
      // start 是指在所有全部的数据中, 从第几条开始拿数据
      // 如果每页长度是3条
      // 现在是第4页
      // 1=>012
      // 2=>345
      // 3=>678
      // 4=>9 10 11
      return {
        _limit: pageSize,
        _start: (this.currentPage - 1) * pageSize
      }
    }
  },
  created() {
    this.loadPage()
    this.getAgentList()
  },
  methods: {
    showEditDialog(id) {
      this.isShowDialog = true
      this.$refs.clientDialog.getClientDetail(id)
    },
    async loadPage() {
      this.clientList = await getClientList({
        ...this.pageConfig,
        // 这里适配有或者没有搜索条件的加载
        name_contains: this.keyword || null,
        agent: this.selectAgent || null
      })
      this.total = await getClientNumber({
        name_contains: this.keyword || null,
        agent: this.selectAgent || null
      })
    },
    currentChange(newPage) {
      // 每页的开始, 都是前一页的结束索引加一, 也就是前面所有页面的长度总和
      this.currentPage = newPage
      this.loadPage()
    },
    search() {
      // 发请求带上收缩参数
      this.currentPage = 1
      this.loadPage()
    },
    async getAgentList() {
      this.agentList = await getAgentList({
        _start: 0,
        _limit: 999
      })
      console.log('经纪人', this.agentList)
    },
    async delClient(id) {
      // 二次询问
      await this.$confirm('是否确认删除')
      // 发请求
      await delClient(id)
      // 提示用户
      this.$message.success('删除成功')
      // 更新页面
      this.loadPage()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  margin: 20px;
}
.mainTable {
  margin-top: 20px;
}
.avatar {
  width: 160px;
  height: 120px;
  // object-fit: contain;
  object-fit: cover;
}
</style>
